<template>
  <a-form-item
    v-if="!notNeedValue"
    hide-label
    :field="`conditions[${rowIndex}].value`"
    validate-trigger="blur"
    :rules="valueRule">
    {{ currentOperatorValue?.value?.count }}
    <template v-if="multipleValue">
      <a-select
        v-if="multipleOptions.length > 0"
        v-model="modelValue"
        multiple
        :placeholder="placeHolder">
        <a-option
          v-for="item in multipleOptions"
          :key="item.field"
          :label="item.show_name"
          :value="item.field" />
      </a-select>
      <a-input-tag
        v-else
        v-model="modelValue"
        :placeholder="placeHolder"
        @blur="(e) => handleTagInputBlur(e)">
      </a-input-tag>
    </template>
    <template v-else>
      <a-select
        v-if="multipleOptions.length > 0"
        v-model="modelValue"
        :placeholder="placeHolder">
        <a-option
          v-for="item in multipleOptions"
          :key="item.field"
          :label="item.show_name"
          :value="item.field" />
      </a-select>
      <a-input v-else v-model="modelValue" :placeholder="placeHolder"></a-input>
    </template>
  </a-form-item>
</template>

<script lang="ts" setup>
import type { WafConditionItem } from '@/apis/model/waf'
import { useConfigStore } from '@/stores/config'
import type { FieldRule } from '@arco-design/web-vue'

interface IProps {
  field: string
  operator: string
  rowIndex: number
  init: boolean
}
const props = withDefaults(defineProps<IProps>(), {
  rowIndex: 0
})

const modelValue = defineModel<
  string | number | (string | number)[] | undefined
>({
  required: true
})
const configStore = useConfigStore()
// 字段选项

// 当前行字段信息
const currentField = computed(() => {
  const list = configStore.conditionQuery as WafConditionItem[]
  const cField = list.find((item) => item.field?.field === props.field)
  return cField
})

// 值校验规则
const valueRule = computed<FieldRule>(() => {
  return {
    required: true,
    validator(value, callback) {
      const max = currentOperatorValue.value?.value?.max ?? 200 //最大长度
      const min = currentOperatorValue.value?.value?.min ?? 0 // 最小长度
      const type = currentOperatorValue.value?.value?.type || null //输入类型，int时只能输入纯数字,其他则不限制

      const count = currentOperatorValue.value?.value?.count || null // 可输入值的个数，大于1则输入框可以输入多个
      if (!value) {
        let msg = '请输入值'
        if (multipleOptions.value.length > 0) {
          msg = `请选择${currentField.value?.field?.show_name}`
        } else {
          msg = `请输入${currentField.value?.field?.show_name}`
        }
        return callback(msg)
      }
      if (type === 'int') {
        const numReg = /^[0-9]+$/g
        if (count && count > 1) {
          for (const v in value) {
            if (!numReg.test(v)) {
              return callback('只能输入数字')
            }
          }
        }
        if (!numReg.test(value)) {
          return callback('只能输入数字')
        }

        if (value > max || value < min) {
          return callback(`请输入 ${min}-${max} 之间`)
        }
      }
      const valueStr = value.toString()
      if (min && max) {
        if (valueStr.length < min || valueStr.length > max) {
          return callback(`请输入 ${min}-${max} 之间`)
        }
      } else if (max && !min) {
        if (valueStr.length > max) {
          return callback(`值不超过 ${max}`)
        }
      } else if (min && !max) {
        return callback(`值不小于 ${min}`)
      }
    }
  }
})
// 当前行的操作符信息
const currentOperatorValue = computed(() => {
  const list = configStore.conditionQuery as WafConditionItem[]
  const operations = list.find(
    (item) => item.field?.field === props.field
  )!.operators!
  const item = operations.find((item) => item.field === props.operator)!
  return item
})

const multipleValue = computed(
  () =>
    currentOperatorValue?.value?.value?.count &&
    currentOperatorValue?.value?.value?.count > 1
)

const notNeedValue = computed(
  () => currentOperatorValue.value?.value?.count === 0
)
type MultipleOptionsItem = { field?: string; show_name?: string }
const multipleOptions = computed<Array<{ field?: string; show_name?: string }>>(
  () => {
    if (
      currentField.value?.allowed_values &&
      currentField.value?.allowed_values.length > 1
    ) {
      return currentField.value?.allowed_values as MultipleOptionsItem[]
    }
    if (
      currentOperatorValue.value?.allowed_values &&
      currentOperatorValue.value?.allowed_values.length > 1
    ) {
      return currentOperatorValue.value?.allowed_values as MultipleOptionsItem[]
    }
    return []
  }
)
// tag输入框失焦添加
const handleTagInputBlur = (e: any) => {
  const value = e.target.value ?? ''
  if (value.length > 0) {
    modelValue.value = Array.isArray(modelValue.value)
      ? modelValue.value.concat(value)
      : [value]
  }
}

const placeHolder = computed(() => {
  if (currentOperatorValue.value?.value?.example) {
    return currentOperatorValue.value?.value?.example
  }
  if (multipleOptions.value.length > 0) {
    return `请选择${currentField.value?.field?.show_name}`
  }
  return `请输入${currentField.value?.field?.show_name}`
})
</script>
